<template>
  <div>
    <van-nav-bar title="黑马优购" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
    <div class="midBox">
      <form action="/" class="abb">
        <van-search v-model="cateName" placeholder="请输入搜索关键词" show-action @search="onSearch" />
      </form>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell
          v-for="(item, index) in getList"
          :key="index"
          :title="item.goods_name"
          @click="gettailts(item.goods_id)"
        />
      </van-list>
      <div class="ls" v-if="flag">
        <span>历史记录:</span>
        <span>
          <van-icon name="delete" @click="deleteSearchList" />
        </span>
      </div>
      <div class="tbox">
        <van-tag
          size="large"
          v-for="(item,index) in searchlist"
          :key="index"
          @click="setHistory(item)"
        >{{item}}</van-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      cateName: "",
      getList: [],
      hpst: [],
      searchlist: [],
      flag: true,
      loading: false,
      finished: false,
      searchHR: []
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSearch() {
      if (this.cateName.trim() === "") {
        return false;
      }
      this.searchlist.push(this.cateName);
      this.searchlist = Array.from(new Set(this.searchlist));
      localStorage.setItem("searchList", this.searchlist);
      this.$router.push({ path: "/goods", query: { cateName: this.cateName } });
    },
    // 获取数据
    async getSearch() {
      if (this.cateName.trim().length === 0) {
        this.getList = [];
        return false;
      }
      const { data: res } = await this.$http.get("/goods/qsearch", {
        params: { query: this.cateName }
      });
      this.getList = res.message;
      this.flag = true;
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.hpst.push(this.hpst.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.hpst.length >= 40) {
          this.finished = true;
        }
      }, 500);
    },
    // 点击跳转详情
    gettailts(goodid) {
      this.$store.commit("getgoodid", goodid);
      this.$router.push("/details");
    },
    // 删除历史记录
    deleteSearchList() {
      this.searchlist = [];
      localStorage.removeItem("searchList");
    },
    setHistory(val) {
      this.cateName = val;
      this.onSearch();
    }
  },
  created() {
    const result = localStorage.getItem("searchList");
    if (result) {
      this.searchlist = result.split(",");
    }
    this.getSearch();
    this.$store.commit("setIfShow", true);
  },
  watch: {
    cateName() {
      const timer = setTimeout(() => {
        this.getSearch();
      }, 500);
    }
  }
};
</script>

<style lang='less' scoped>
.abb {
  margin-top: 50px;
}
.ls {
  display: flex;
  justify-content: space-between;
  color: #6c6c7f;
  font-size: 14px;
  font-weight: 700;
  padding: 0 5px;
}
.tbox {
  margin: 10px 10px;
}
.van-tag {
  margin: 8px;
}
.midBox {
  margin-top: 46px;
}
</style>
